<template>
<div id="taskComment">
       <!--后退-->
        <img style="height:0.75rem;width:0.4rem;margin:0.9rem 0.6rem;" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">详情</mt-tab-item>
            <mt-tab-item id="2">评论</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                    <!--第1种选择类型-->
                    <div class="textOne" v-for="item in serverDetailMess.explainJson.textSetOne">
                        <div style="display:flex;">
                            <section>
                                <textarea v-model="item.inputBox1" maxlength="360">{{item.inputBox1}}</textarea>
                            </section>
                            <section>
                                <p><textarea v-model="item.inputBox2" maxlength="60">{{item.inputBox2}}</textarea></p>
                                <p><textarea v-model="item.inputBox3" maxlength="60">{{item.inputBox3}}</textarea></p>
                            </section>
                        </div>
                    </div>

                    <div class="pictureOne" v-for="item) in serverDetailMess.explainJson.imageOne" >
                        <div style="display:flex;">
                            <section>
                                <p><img :src="item.common1"></p>
                            </section>
                            <section>
                                <p><img :src="item.common2"></p>
                                <p><img :src="item.common3"></p>
                            </section>
                        </div>
                    </div>

                     <!--第2种选择类型-->
                    <div class="textTwo"  v-for="item in serverDetailMess.explainJson.textSetTwo">
                        <div style="display:flex;">
                            <p><textarea v-model="item.inputBox1" maxlength="288">{{item.inputBox1}}</textarea></p>
                            <p><textarea v-model="item.inputBox2" maxlength="236">{{item.inputBox2}}</textarea></p>
                        </div>
                    </div>
                    <div class="pictureTwo" v-for="item in serverDetailMess.explainJson.imageTwo">
                        <div style="display:flex;">
                            <p><img :src="item.common1"></p>
                            <p><img :src="item.common2"></p>
                        </div>
                    </div>
                    <!--第三种选择类型-->
                    <div class="textThree"  v-for="item in serverDetailMess.explainJson.textSetThree">
                        <p><textarea v-model="item.inputBox1" maxlength="250">{{item.inputBox1}}</textarea></p>
                    </div>
                    <div class="pictureThree" v-for="item in serverDetailMess.explainJson.imageThree">
                         <p><img :src="item.common1"></p>
                    </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="small">
                    <div class="content">
                        <p><img :src="currentUserCake.headPortrait" alt=""></p>
                    </div>
                    <div class="data">
                        <p>总平均数：{{currentUserCake.totalEvaluateNumber}}</p>
                        <p>信用度：{{currentUserCake.creditDegree}}</p>
                    </div>
                    <div class = 'chart'>
                        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
                        <chart-pie :data = 'chartData' :config = 'chartConfig'></chart-pie>
                    </div>
                </div>
                <div style="height:40%;overflow:scroll;">
                    <div class="comment" v-for="item in userByServer.list">
                        <p class="doOrder" @click="doOrder">
                            <img style="" :src="item.userModel.headPortrait" alt="">
                        </p>
                        <div class="commentDet">
                            <section style="">
                                <p style="">{{item.userModel.nickName}}</p>
                                <p style="line-height:1.25rem;">
                                   <rate disabled :length="5" v-model="item.evaluationScore"/>
                                </p>
                            </section>
                            <p class="detail">{{lengthSub(item.evaluationContent)}}</p>
                            <p class="expressDet"><span style="margin-left:1.25rem;">{{dateTime(item.createTime)}}</span></p>
                        </div>
                    </div>

                </div>

            </mt-tab-container-item>
        </mt-tab-container>

        <!-- 底部按钮 -->
        <div id="btn">
            <div class ="contact">
                <p>电联</p>
                <p>发信息</p>
            </div>
            <div class ="order" @click="showDiv()">立即下单</div>
        </div>
        <div id="taskWindow" v-show="taskWindow">
        </div>
        <div id="taskLayer" v-show="taskLayer">
            <div class="totalOrder" style="display:flex;">
                <p class="orderImg"><img src="../../assets/task/rubbit.png" alt=""></p>
                <div class="orderNumber">

                    <p>￥<span>{{typeNum*quantity}}</span></p>
                    <p>总下单量<span style="margin-left:0.5rem;">1000</span></p>
                    <p>请选择<span style="margin-left:1.5rem;">规格</span></p>
                </div>
                <p><img  @click="closeDiv()" style="width:1.5rem;height:10x;float:right;margin-top:0.5rem;"src="../../assets/task/chanel.png" alt=""></p>
            </div>
            <div class="orderDet" >
                <section>
                    规格
                    <p><span v-for="(item,index) in serverDetailMess.specModels" @click="selData(index)" :class="{active:isActive==index}">{{item.specName}}</span></p>
                    价格
                    <p><span v-for="(item,index) in serverDetailMess.specModels" @click="selData(index)" :class="{active:isActive==index}">{{item.specPrice}}</span></p>
                </section>
                <p style="margin-top:1rem;">
                    <span style="padding-right:5rem;">数量</span>
                    <el-input-number v-model="quantity" @change="handleChange" :min="1"  label="描述文字"></el-input-number>
                </p>
            </div>
            <p class="goOrder" @click="serverOrder" >确定</p>
        </div>
</div>
</template>
<script>
import { ChartPie } from 'vue-d2b'
import lengthSub from '../../server/lengthSub.js'
import dateTime from '../../server/dataTime.js'
export default {
    data() {
        return {
            lengthSub:lengthSub,
            dateTime:dateTime,
            taskWindow:false,
            taskLayer:false,
            isActive:'',
            typeIndex:1,
            typeNum:'',
            total:{},
            quantity:1,
            userByServer:{},
            serverDetailMess:{
                explainJson:{
                    textSetOne:[],
                    textSetTwo:[],
                    textSetThree:[],
                    imageOne:[],
                    imageTwo:[],
                    imageThree:[],
                },
                serverName: undefined,
                serverStatus: undefined,
                serverType: '',
                shopId: '',
                specModels: [
                    {
                        serverId: '',
                        specName: undefined,
                        specPrice: undefined,
                    },
                    {
                        serverId: '',
                        specName: undefined,
                        specPrice: undefined,
                    },
                    {
                        serverId: '',
                        specName: undefined,
                        specPrice: undefined,
                    }

                ],
                topExplainJson: {
                    common1:undefined,
                    common2:undefined,
                    common3:undefined,
                    input1:undefined,
                    input2:undefined,
                    input3:undefined,
                }
            },
            selected:"2",
            chartData: [

            ],
            currentUserCake:'',
            chartConfig (chart) {
                chart.donutRatio(0.5)
            }
        }
    },
   components:{
        'ChartPie':ChartPie
   },
   created(){
        this.getCurrentMess()
        this.getDetailById();
        setTimeout(()=>{
               this.checkCakeMess()
             },1000)
   },
//    computed: {
//         specPrice() {
//             let totalNum = 0;
//             this.specModels.forEach((item)=>{
//                 totalNum=Number(item.specPrice)*this.quantity
//             })
//     　　　　return totalNum
//     　　}
//     },
//     watch: {
//         specPrice(newValue, oldValue) {
//     　　　　console.log(newValue)
//     　　}
//     },
    methods: {
        selData(index){
            this.isActive=index;
            this.typeIndex=index;
            this.typeNum=this.serverDetailMess.specModels[index].specPrice;
        },
        //下单
        doOrder(){
            this.$router.push('/userCom')
        },
        //下单
        goOrder(){
            this.$router.push('/orderConfirm')
        },
        // 获取当前登录人信息
        getCurrentMess(){
                 this.$api.currUser().then((res)=>{
                     if(res.code=='000000'){
                         this.currentUserId = res.data.id
                     }
                 })
        },
        // 查询一个人员饼状图信息
        checkCakeMess(){
            this.$api.checkCakeMess(this.currentUserId).then((res)=>{
                     if(res.code=='000000'){
                        res.data.userTagModels.forEach((item)=>{
                              const obj = {};
                              obj.label = item.tagName;
                              obj.value = item.number;
                              this.chartData.push(obj);
                        })
                         this.currentUserCake = res.data;
                          console.log('this.currentUserCake')
                         console.log(this.currentUserCake)
                     }
            })
        },
        //查询本条服务详情
        getDetailById(){
            this.$api.getDetailById(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                  this.serverDetailMess = res.data
                  this.serverDetailMess.explainJson = JSON.parse(this.serverDetailMess.explainJson)
                  this.serverDetailMess.topExplainJson = JSON.parse(this.serverDetailMess.topExplainJson)
              }
            }),
            //本条服务评论详情
            this.$api.findByServer(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.userByServer = res.data
                    console.log('this.userByServer')
                    console.log(this.userByServer)
                }
            })
        },

        //下单数据带到下一页
        serverOrder(){
            this.total.quantity=this.quantity
            this.total.shopId=this.serverDetailMess.shopId
            this.total.serverId=this.serverDetailMess.id
            this.total.specId=this.serverDetailMess.specModels[this.typeIndex].id
            this.total.specName=this.serverDetailMess.specModels[this.typeIndex].specName
            this.total.amount=this.serverDetailMess.specModels[this.typeIndex].specPrice*this.quantity
            this.total.serverName=this.serverDetailMess.serverName

            this.$router.push({
                path: '/orderConfirm',
                name: 'orderConfirm',
                query: {
                    name: 'orderConfirm',
                    data:this.total,
                }
            })

        },
        showDiv(){
            this.taskLayer=true;
            this.taskWindow=true;
        },
        closeDiv() {
            this.taskLayer=false;
            this.taskWindow=false;
        },
        handleChange(value) {
        },
    }
}
</script>
<style>
#taskComment .mint-navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    width:93%;
    margin:0rem auto 0.5rem;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #e2e2e2;
}
#taskComment .mint-navbar .mint-tab-item {
    background:none;
    padding: 0 0;

}
#taskComment .mint-tab-item {
    background:none;
    display: block;
    padding: 0 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-decoration: none;
}
#taskComment .mint-tab-item-label {
    color: inherit;
    font-size: 1rem;
    height:2.5rem;
    line-height:2.5rem;

}
#taskComment .mint-tab-container{
    height:30rem;
    overflow:scroll;
}
#taskComment .mint-tab-item:nth-child(1) .mint-tab-item-label::before{
    content:url(../../assets/task/undel.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#taskComment .mint-tab-item:nth-child(2) .mint-tab-item-label::before{
    content:url(../../assets/task/uncomment.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#taskComment .mint-tab-item:nth-child(1).is-selected .mint-tab-item-label::before{
    content:url(../../assets/task/del.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#taskComment .mint-tab-item:nth-child(2).is-selected .mint-tab-item-label::before{
    content:url(../../assets/task/comment.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#taskComment .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 0px solid #26a2ff;
    color: #2ba092;
    margin-bottom: -0.15rem;
}
#taskComment .chart{
    width: 100%;
    height: 15rem;
  }
#taskComment .d2b-chart{
    height: 17rem;
    top:2rem !important;
}
#taskComment .d2b-chart-frame .d2b-breadcrumbs-frame:not(.d2b-vertical).d2b-legend-frame, .d2b-chart-frame .d2b-legend-frame:not(.d2b-vertical).d2b-legend-frame {
    height: 20px;
    bottom:-1.5rem !important;
    text-align: center;
}
#taskComment .Rate__star[disabled][data-v-59a74259]{
    color:#efc20f!important;
}
#taskComment .Rate__star[data-v-59a74259]{
    padding:0!important;
}
#taskComment .shopCon{
    display:flex;
    padding:1rem;
    border-radius:7px;
    background-image:url(../../assets/task/zhaofuw.png);
}
#taskComment .particulars{
    height:12.3rem;
    width:12.3rem;
    border-radius:7px;
    border:7px solid #29a193;
}
#taskComment .upper{
    height:6.15rem;
    width:6.15rem;
    border-radius:7px;
    border:7px solid #c4e1c6;
}
#taskComment .lower{
    height:6.15rem;
    width:6.15rem;
    border-radius:7px;
    border:7px solid #69b373;
}
#taskComment #btn{
    width:100%;
    position:absolute;
    bottom:0px;
    display:flex;
}
#taskComment #btn .contact{
    background:#fff;
    width:60%;
    height:3rem;
    line-height:3rem;
    display:flex;
}
#taskComment #btn .contact > p{
    width:50%;
    text-align:center;
}
#taskComment #btn .order{
    background:rgba(225,225,225,1);
    width:40%;
    text-align:center;
    height:3rem;
    line-height:3rem;
}
#taskComment .small{
    width:100%;
    height:18.5rem;
    background-size:100% 100%;
    background-image:url(../../assets/task/shadow.png);
}
#taskComment .small .content{
    position:absolute;
    z-index:111;
    top:19%;
    left:42%;

}
#taskComment .small .data{
    position:absolute;
    z-index:111;
    top:3%;
    left:70%;
    font-size:0.8rem;
    line-height:1.5rem;
}
#taskComment .small .content > p:nth-child(1) >img{
    border-radius:50%;
    height:4.2rem;
    width:4.2rem;
    border:0.2rem solid #29a193;
}
#taskComment .small .content > p:nth-child(2){
    text-align:center;
}
#taskComment .small .content > p:nth-child(2) >img{
    height:1rem;
    width:1rem;
    margin-left:0.5rem;
}
#taskComment .comment{
    display:flex;
    padding:1rem 1.5rem;
    background-size:100% 100%;
    background-image:url(../../assets/task/1.png)
}
#taskComment .comment .doOrder{
    margin:0px 0.5rem;
}
#taskComment .comment .doOrder > img{
    width:3rem;
    height:3rem;
    border-radius:50%;
}
#taskComment .comment .commentDet{
    width:100%;
    height:100%;
}
#taskComment .comment .commentDet > section{
    height:1.5rem;
    display:flex;
    justify-content:space-between;
}
#taskComment .comment .commentDet > section > p{
    line-height:1.5rem;
    font-size:0.9rem;
    color:#989898
}
#taskComment .comment .commentDet .detail{
    width:100%;
    height:2.5rem;
    font-size:0.7rem;
    word-wrap:break-word;
}
#taskComment .comment .commentDet .expressDet{
    height:1.5rem;
    font-size:0.7rem;
    color:#989898;
    float:right;
}
#taskComment #taskWindow{
    background-color:#4c4c4c;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 1;
    position: absolute;
}
#taskComment #taskLayer {
    width: 100%;
    height: 55%;
    background:#ffffff;
    left: 0;
    top: 45%;
    color:#000;
    z-index: 2;
    position: absolute;
}
#taskComment #taskLayer .orderImg{
    width:7rem;
    height:7rem;
    border:2px solid #29a193;
    background:#FFF;
    margin-top:-2rem;
    margin-left:5%;
}
#taskComment #taskLayer .orderImg > img{
    height:7rem;
    margin:0px 1rem;
}
#taskComment #taskLayer .orderNumber{
    width:50%;
    margin:0.5rem 1rem;
    line-height:1.5rem;
}
#taskComment #taskLayer .orderNumber p:nth-child(1){
    font-size:1.2rem;
    color:#29a095
}
#taskComment #taskLayer .orderNumber p:nth-child(n+2){
    font-size:0.8rem;
}
#taskComment #taskLayer .orderDet{
    width:93%;
    margin:0.8rem auto;
    line-height:2.5rem;
    text-align:left;
}
#taskComment #taskLayer .orderDet .active{
    background:#69b373;
    color:#fff;
}
#taskComment #taskLayer .orderDet > section > p:nth-child(1){
    display:flex;
    width:60%;
    justify-content:space-between;
}
#taskComment #taskLayer .orderDet > section > p:nth-child(2){
    display:flex;
    width:80%;
    justify-content:space-between;
}
#taskComment #taskLayer .orderDet > section > p >span{
    display:inline-block;
    height:2.2rem;
    width:30%;
    text-align:center;
    color:#bfbfbf;
    line-height:2.2rem;
    background:#f8f8f8;
    border-radius:0.5rem;
}
#taskComment #taskLayer .goOrder{
    height:3rem;
    width:100%;
    text-align:center;
    line-height:3rem;
    background:#29a163;
    color:#fff;
}
#taskComment .textOne{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0.5rem;
}
#taskComment .textOne section:nth-child(1){
    height:13rem;
    width:70%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#taskComment .textOne section:nth-child(1) > textarea{
    height:100%;
    width:100%;
}
#taskComment .textOne section:nth-child(2){
    width:30%;
}
#taskComment .textOne section:nth-child(2) p:nth-child(1){
    height:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #c4e1c6;
}
#taskComment .textOne section:nth-child(2) p:nth-child(1) > textarea{
    height:100%;
    width:100%;
}
#taskComment .textOne section:nth-child(2) p:nth-child(2){
    height:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #69b373;
}
#taskComment .textOne section:nth-child(2) p:nth-child(2) > textarea{
    height:100%;
    width:100%;
}
#taskComment .pictureOne{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0.5rem;
}
#taskComment .pictureOne section:nth-child(1){
    height:13rem;
    width:70%;
    border-radius:7px;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#taskComment .pictureOne section:nth-child(1) > p > img{
    height:12rem;
    width:100%;
}
#taskComment .pictureOne section:nth-child(2) p:nth-child(1){
    height:6.5rem;
    width:6.5rem;
    border-radius:7px;
    font-size:1.5rem;
    border:7px solid #c4e1c6;
}
#taskComment .pictureOne section:nth-child(2) > p > img{
    height:5.5rem;
    width:100%;
}
#taskComment .pictureOne section:nth-child(2) p:nth-child(2){
    height:6.5rem;
    width:6.5rem;
    border-radius:7px;
    font-size:1.5rem;
    border:7px solid #69b373;
}
#taskComment .textTwo{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0px 0.5rem 0.5rem 0.5rem;
}
#taskComment .textTwo > div P:nth-child(1){
    height:13rem;
    width:70%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#taskComment .textTwo  > div P:nth-child(1) > textarea{
    height:100%;
    width:100%;
}
#taskComment .textTwo > div P:nth-child(2){
    height:13rem;
    width:30%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#taskComment .textTwo > div P:nth-child(2) > textarea{
    height:100%;
    width:100%;
}
#taskComment .pictureTwo{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0.5rem;
}
#taskComment .pictureTwo > div P:nth-child(1){
    height:13rem;
    width:70%;
    border-radius:7px;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#taskComment .pictureTwo > div > p > img{
    height:12rem;
    width:100%;
}
#taskComment .pictureTwo > div P:nth-child(2){
    height:13rem;
    width:6.5rem;
    border-radius:7px;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#taskComment .textThree{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0.8rem;
}
#taskComment .textThree P{
    height:13rem;
    width:100%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#taskComment .textThree P > textarea{
    height:100%;
    width:100%;
}
#taskComment .pictureThree{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0.5rem;
}
#taskComment .pictureThree > P  img{
    height:13rem;
    width:100%;
    border-radius:7px;
    font-size:1.5rem;
    border:7px solid #29a193;
}

</style>
